<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index" style="display: flex; align-items: center;">
                {{ index }}__
                <Normal :name="`正常删除,会重新渲染render---${item.name}`">{{ index }}</Normal>
                <button @click="onClick(item, index)">删除</button>
            </li>
        </ul>
        <!-- <ul>
            <li v-for="(item, index) in list" :key="index" style="display: flex; align-items: center;">
                {{ index }}__
                <Exception name="异常删除,不会重新渲染render"></Exception>
                <button @click="onClick(item, index)">删除</button>
            </li>
        </ul> -->
        
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import Exception from './components/Exception.vue';
    import Normal from './components/Normal.vue';

    let list = ref([
        { id:1,name:'zhangsan1', age: 44},
        { id:2,name:'zhangsan2', age: 51},
        { id:3,name:'zhangsan3', age: 23},
        { id:4,name:'zhangsan4', age: 54},
    ])
    const onClick = (item, index) => {
        list.value.splice(index, 1)
        // list.value = list.value.filter(el => item.id !== el.id)
    }
</script>